<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="public" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>汽车在线</title>
    <link type="text/css" rel="stylesheet" href="css/global.css" />
    <style>
        #scroll-wrapper {
            overflow: hidden;
            padding-top: 3.5em;
        }

        #alarm-list {
            width: 100%;
        }

        #alarm-list li {
            border-bottom: 1px solid #ccc;
        }

        #alarm-list li a {
            padding: 10px;
            display: block;
            color: #333;
        }

        #alarm-list li a:visited {
            color: #333;
        }

        #alarm-list li a:active,
        #alarm-list li a:hover {
            background-color: #94CDE9;
        }

        #alarm-list li span {
            display: inline-block;
            width: 30%;
            font-size: .8em;
        }

        #alarm-list li span.alarm-time {
            width: 40%;
            white-space: nowrap;
        }
    </style>
    <script src="js/lang_cn.js"></script>
    <script src="js/brand/zepto.min.js"></script>
    <script src="js/global.js"></script>
</head>

<body>
    <div class="container">
        <div class="header">
            <h3 class="title">
                <a class="back" href="javascript:history.back();"></a><a class="toolbox hidden" href=""></a>报警信息
            </h3>
        </div>
        <div id="scroll-wrapper">
            <div id="scroller">
                <ul id="alarm-list">

                </ul>
            </div>
        </div>
    </div>
    <script src="js/brand/iscroll-lite.js"></script>
    <script type="text/javascript">
        (function () {
            var params = goome.wx.utils.params(),
                myScroll = null,
                headerHeight = $('.header').height(),
                $scrollWrapper = $('#scroll-wrapper'),
                $alarmList = $('#alarm-list');
            params.method = 'dev';
            params.pagesize = 20;
            params.page_dir = 'next';
            params.timestamp = 0;
            function loadList() {
                $.ajax({
                    url: goome.wx.config.apiUrl + 'tool/get_alarminfo',
                    dataType: 'jsonp',
                    data: params,
                    success: function (result) {
                        if (result && result.errcode === 0) {
                            renderList(result.data);
                        } else {
                            goome.wx.utils.showTip(result);
                        }
                    },
                    error: function (err) {
                        goome.wx.utils.showTip(err);
                    }
                })
            }
            function renderList(list) {
                var html = [],
                    len = list.length - 1;
                $.each(list, function (i, v) {
                    html.push('<li><a href="alarm_map.html?' + goome.wx.utils.serialize() + '&dev_name=' + encodeURIComponent(v.dev_name) + '&lat=' + v.lat + '&lng=' + v.lng + '&alarm_type=' + encodeURIComponent(v.alarm_type) + '&alarm_time=' + v.alarm_time + '"><span class="alarm-time">' + goome.wx.utils.dateFormat(v.alarm_time) + '</span><span class="alarm-type">' + v.alarm_type + '</span><span class="alarm-device">' + v.dev_name + '</span>' + '</a></li>');
                    if (i == len) {
                        params.timestamp = v.alarm_time;
                    }
                });
                $alarmList.append(html.join(''));
                if (!myScroll) {
                    myScroll = new IScroll('#scroll-wrapper', { click: true });
                    myScroll.on('scrollEnd', function (e) {
                        if (Math.abs(this.y) + $scrollWrapper.height() > $alarmList.height() - 50) {
                            loadList();
                        }
                    });
                } else {
                    myScroll.refresh();
                }
            }
            function resize() {
                $scrollWrapper.height($(window).height() - headerHeight);
            }
            function bindEvents() {
                document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            }
            function init() {
                resize();
                bindEvents();
                loadList();
            }
            init();
        })();
    </script>
</body>

</html>